草庐IT

html 图像

全部标签

javascript + html5 Canvas : drawing instead of dragging/scrolling on mobile devices?

我正在使用html5Canvas+一些javascript(onmousedown/move/up)在网页上创建简单的绘图板。在Opera、Firefox、Chrome等中运行良好(在台式电脑上试用)。但是,如果我使用iPhone访问此页面,当我尝试在Canvas上绘图时,它会拖动或滚动页面。这适用于其他页面内容,通过上下滑动页面,您可以像往常一样在移动浏览器中浏览页面。但是有没有一种方法可以在Canvas上禁用此行为,以便移动访问者也可以在上面实际绘制一些东西?为了您的引用,这里有一个简单的例子:functioninit(){varcanvas=document.getElement

javascript - 快速 HTML 表格排序?

是的,我知道有很多JS/jQuery程序可以做到这一点。我目前正在使用http://www.kryogenix.org/code/browser/sorttable/sorttable.js.这非常简单:只需一个JS文件,向表中添加一些类属性,然后就可以了。特别是,您实际上不需要了解JS即可使用它,您可以添加自定义排序键,而无需编写自己的JS来扩展它。由于这两个原因,我非常喜欢它。主要问题:我的表长约9300行,排序需要10-20秒。所以我想知道,还有比这更快的其他脚本吗?这些是我发现的:http://webfx.eae.net/dhtml/sortabletable/sortable

javascript - 使用 Qunit 检查图像是否正确加载

我正在尝试通过将URL设置为测试图像的src属性并检查error事件处理程序是否顺利。到目前为止,我所拥有的是:test('image',function(){vartest_image=$('#test-image');test_image.error(function(e){//properlytriggeredconsole.log(e);is_valid=false;//ok(false,'Issueloadingimage');breaksqunit});varis_valid=true;test_image.attr('src','doesntexist');console

javascript - jQuery 改变图像高度保持纵横比

所以我有一个画廊,其中我的大部分图像目前100%由CSS控制。但是,在设置min-height:100%;在我的图像上,我使一些图像拉伸(stretch)。我没有太多有问题的照片,但用户上传什么是我无法控制的。无论如何,使用jQuery我可以获得图像高度并检查它是否满足要求,如果不满足,则以某种方式增加图像宽度以满足高度要求但保持所有比例?因此,我避免造成任何失真,但通过让div没有间隙来保持画廊的整洁。注意:提供的图像是我删除min-height:100%;时发生的情况,以便您可以看到我的问题。更新-----我找到了一个目前似乎工作正常的解决方案,它可能不是最好的尝试,但我找到了另一

javascript - 如何为包含 HTML 和 JavaScript 或 jQuery 的网页编写 Jasmine 测试?

我在Jasmine上阅读的资料中,他们只测试了一个.js文件。但是,如果测试是在网页上进行的,比如说,使用代码:try.html:$("#the-input").focus(function(){$(this).css("background","#ff9");});$("#the-input").blur(function(){$(this).css("background","#cff");});就是说,如果用户点击(或tab)输入框,将输入框的背景设置为黄色,当焦点移出时,将其设置为浅蓝色。在这种情况下,我们如何在.html文件中测试上述行为?(这个html文件应该在哪里——它可

javascript - 在 HTML 中加载 Js 文件

我的第一个PhoneGap应用程序包含2个HTML文件。第一个名为index.html,它使用了index.js。该文件将显示一个列表项。当我单击该列表中的一个项目时,它会将我带到detail.html文件:$.mobile.changePage("detail.html",{transition:"slideup"});或location.href="detail.html";在detail.html页面上,我加载了detal.js。但是它没有用。我无法在detail.js中使用函数。请给我你的建议,有什么例子吗?CapturePhotoCameraCaptureEditGetPho

javascript - 当 html 元素具有相同的 id 名称时,如何检查未声明的变量?

如何检查变量名是否“正在使用”?含义:如何检查变量名是否已在varvarname='something'语句中使用?通常,我会检查是否typeofvarname=='undefined',这似乎工作正常。问题是当页面上有一个带有id="varname"的元素时。现在,当我检查typeofvarname=='undefined',无论如何我都会得到false,因为varname是一些HTML元素。varname不是“正在使用”,但它也不是undefined。//ifhasanidoftest1,howdoicheckiftest1isundeclared?console.log(type

javascript - 在作为原始图像二进制数据(png 或 jpeg)上传到服务器之前裁剪或调整图像大小

关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭7年前。Improvethisquestion我正在尝试在浏览器中裁剪图像并将它们作为原始图像二进制数据上传到服务器(格式应为"image/jpeg"或"image/png")。我尝试了很多客户端裁剪和上传方法,它们都使用html5函数canvas.toDataURL()来获取"data:image/png;base64"中的最终裁剪数据/strong>格式,将其上传到网络服务器,然后在服务器端将其转换为原始图像二进制数据。问题是我必须将裁剪

javascript - React HTML 编辑器 (TinyMce)

我一直在寻找用于React的HTML编辑器,但因为我找不到任何可以正常工作的东西(我只需要格式化文本h1、h2、h3、p、粗体和图像[在base64中])最后我决定使用TinyMce,效果很好。但只有当页面第一次打开时。如果我再次进入该页面。如果没有浏览器relaod,则tinymce不会被初始化。你知道在这种情况下会触发什么react事件吗?到目前为止,这是我的小wrapper:/**@jsxReact.DOM*/varReact=require('react');varTinyMceEditor=React.createClass({componentDidMount:functi

javascript - 防止 Jade 在 HTML 元素中添加赋值子句

我想在Angular2应用程序的输入标签中定义一个局部变量:input(#sometext)button((click)="addTechnology(sometext.value)")Add我期望的输出是:Add但是实际输出是(注意附加的="#sometext"):Add这样,Angular2会抛出以下错误,很可能是因为="#sometext":CannotfinddirectivewithexportAs='#sometext'Error:CannotfinddirectivewithexportAs='#sometext'atnewBaseException(https://co